<template>
	<!-- 等级及数量记录 -->
	<div class="filterSelectBox">
		<!-- 遍历第一层(区分type) -->
		<div v-for="(item,index) in this.opt" :key="index" class="itemBox">
			<div class="mainTitle" :style="{lineHeight:(item.type=='card'?'64px':'')}">{{item.title}}</div>
			<!-- 遍历第二层(区分数量) -->
			<div class="itemBoxSecondFlex">
				<div v-if="item.type=='card'" v-for="(item2,index2) in item.data" :style="{backgroundColor:item2.color}" :key="index2"
				 class="filterSelectCard" :class="[colorList[index2],{activeCard:item2.checked}]" @click="boxClick(index,index2,'card')">
					<!-- 多选框的title类型判别 -->
					<div class="detailTitle" v-if="item.type=='card'">
						<input type="checkbox" class="checkBoxHide" :checked="item2.checked"><span class="checkBoxSpan">{{item2.title}}</span>
						<!-- <el-checkbox v-model="item2.checked" :checked="item2.checked">
							<div>{{item2.title}}</div>
						</el-checkbox> -->
					</div>

					<!-- card类型 -->
					<div class="cardDetailBody">
						<div v-if="item.type=='card'" v-for="(item3,index3) in item2.detail" :key="index3" class="cardDetail">
							<span>{{item3.label}}</span>
							<span>：</span>
							<span>{{item3.value}}</span>
						</div>
					</div>
				</div>
				<div v-if="item.type=='button'" v-for="(item2,index2) in item.data" :key="index2" class="filterSelectButton" :class="{activeButton:item2.checked}"
				 @click="boxClick(index,index2,'button')">
					<!-- 多选框的title类型判别 -->
					<input type="checkbox" :checked="item2.checked" class="checkBoxHide"><span class="checkBoxSpan">{{item2.title}}</span>
					<!-- <el-checkbox v-model="item2.checked" :label="item2.title" border></el-checkbox> -->
				</div>
			</div>
		</div>
	</div>
	</div>
</template>
<script>
	export default {
		name: 'filterSelectBox',
		props: ["option"],
		mounted() {
			this.initData();
		},
		data() {
			return {
				opt: undefined,
				selectList: [],
				colorList: ['color1', 'color2', 'color3', 'color4', 'color5', 'color6', 'color7', 'color8']
			}
		},
		methods: {
			initData() {
				this.opt = this.option
			},
			getColorStyle(index) {
				return this.colorList[index]
			},
			getItemTypeClass(type, isChecked) {
				let arr;
				if (type == 'card') {
					if (isChecked) {
						arr = ['filterSelectCard', 'activeCard'];
					} else {
						arr = ['filterSelectCard'];
					}
				} else if (type == 'button') {
					if (isChecked) {
						arr = ['filterSelectButton', 'activeButton'];
					} else {
						arr = ['filterSelectButton'];
					}
				}
				return arr;
			},
			boxClick(i1, i2, type) {
				const arr = this.opt[i1].data;
				if (i2 == 0) {
					const val = arr[0].checked;
					if (val == false) {
						this.opt[i1].data.forEach(item => {
							item.checked = false;
						});
						this.opt[i1].data[0].checked = true;
					} else {
						this.opt[i1].data[0].checked = false;
					}
				} else {
					this.opt[i1].data[0].checked = false;
					this.opt[i1].data[i2].checked = arr[i2].checked == false ? true : false;
				}
				this.getSelectList();
			},
			getSelectList() {
				const obj = this.opt;
				let data = [];
				for (let i = 0; i < obj.length; i++) {
					let arr = [];
					obj[i].data.forEach(item => {
						if (item.checked) arr.push({
							title: item.title,
							value: item.value
						})
					})
					data.push(arr);
				}
				console.log(data)
				this.$emit("getSelectList", data)
			}
		},
		watch: {
			option: {
				handler() {
					this.opt = this.option;
				},
				immediate: true,
				deep: true
			}
		}
	}
</script>
<style scoped lang="less">
	.filterSelectBox {
		font-size: 14px;
	}

	.itemBox {
		display: flex;
		padding-top: 25px;
		// color: #7e6b5a;

		.mainTitle {
			min-width: 80px;
			padding: 8px 15px 8px 0;
			text-align: right;
			color: #9b9b9b;
		}

		.itemBoxSecondFlex {
			display: flex;
			flex-wrap: wrap;

			>div {
				margin: 5px;
			}

			.color1 {
				background: -webkit-linear-gradient(left, #947c67, #786453);
				/* Safari 5.1 - 6.0 */
				background: -o-linear-gradient(right, #947c67, #786453);
				/* Opera 11.1 - 12.0 */
				background: -moz-linear-gradient(right, #947c67, #786453);
				/* Firefox 3.6 - 15 */
				background: linear-gradient(to right, #947c67, #786453);
				/* 标准的语法（必须放在最后） */
				color: #786453
			}

			.color2 {
				background: -webkit-linear-gradient(left, #7bcd4a, #6bc535);
				/* Safari 5.1 - 6.0 */
				background: -o-linear-gradient(right, #7bcd4a, #6bc535);
				/* Opera 11.1 - 12.0 */
				background: -moz-linear-gradient(right, #7bcd4a, #6bc535);
				/* Firefox 3.6 - 15 */
				background: linear-gradient(to right, #7bcd4a, #6bc535);
				/* 标准的语法（必须放在最后） */
				color: #6bc535
			}

			.color3 {
				background: -webkit-linear-gradient(left, #45b168, #33a457);
				/* Safari 5.1 - 6.0 */
				background: -o-linear-gradient(right, #45b168, #33a457);
				/* Opera 11.1 - 12.0 */
				background: -moz-linear-gradient(right, #45b168, #33a457);
				/* Firefox 3.6 - 15 */
				background: linear-gradient(to right, #45b168, #33a457);
				/* 标准的语法（必须放在最后） */
				color: #33a457
			}

			.color4 {
				background: -webkit-linear-gradient(left, #acce44, #98ba30);
				/* Safari 5.1 - 6.0 */
				background: -o-linear-gradient(right, #acce44, #98ba30);
				/* Opera 11.1 - 12.0 */
				background: -moz-linear-gradient(right, #acce44, #98ba30);
				/* Firefox 3.6 - 15 */
				background: linear-gradient(to right, #acce44, #98ba30);
				/* 标准的语法（必须放在最后） */
				color: #98ba30
			}

			.color5 {
				background: -webkit-linear-gradient(left, #4286dc, #3579ce);
				/* Safari 5.1 - 6.0 */
				background: -o-linear-gradient(right, #4286dc, #3579ce);
				/* Opera 11.1 - 12.0 */
				background: -moz-linear-gradient(right, #4286dc, #3579ce);
				/* Firefox 3.6 - 15 */
				background: linear-gradient(to right, #4286dc, #3579ce);
				/* 标准的语法（必须放在最后） */
				color: #3579ce
			}

			.color6 {
				background: -webkit-linear-gradient(left, #59b5fb, #3aa4f6);
				/* Safari 5.1 - 6.0 */
				background: -o-linear-gradient(right, #59b5fb, #3aa4f6);
				/* Opera 11.1 - 12.0 */
				background: -moz-linear-gradient(right, #59b5fb, #3aa4f6);
				/* Firefox 3.6 - 15 */
				background: linear-gradient(to right, #59b5fb, #3aa4f6);
				/* 标准的语法（必须放在最后） */
				color: #3aa4f6
			}

			.color7 {
				background: -webkit-linear-gradient(left, #2daf9e, #289688);
				/* Safari 5.1 - 6.0 */
				background: -o-linear-gradient(right, #2daf9e, #289688);
				/* Opera 11.1 - 12.0 */
				background: -moz-linear-gradient(right, #2daf9e, #289688);
				/* Firefox 3.6 - 15 */
				background: linear-gradient(to right, #2daf9e, #289688);
				/* 标准的语法（必须放在最后） */
				color: #289688
			}

			.color8 {
				background: -webkit-linear-gradient(left, #afc9da, #9db8ca);
				/* Safari 5.1 - 6.0 */
				background: -o-linear-gradient(right, #afc9da, #9db8ca);
				/* Opera 11.1 - 12.0 */
				background: -moz-linear-gradient(right, #afc9da, #9db8ca);
				/* Firefox 3.6 - 15 */
				background: linear-gradient(to right, #afc9da, #9db8ca);
				/* 标准的语法（必须放在最后） */
				color: #9db8ca
			}
		}

		.cardDetailBody {
			background-color: #fff;
			height: 50px;
			border-radius: 0 0 4px 4px;
			padding-top: 5px;
		}

		.activeCard {
			color: #fff !important;

			>.cardDetailBody {
				height: 50px;
				background: rgba(0, 0, 0, 0)
			}
		}

		.filterSelectCard {
			width: 210px;
			height: 90px;
			margin-right: 15px;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			border-radius: 5px;
			cursor: pointer;
			position: relative;
			box-shadow: 0px 0px 10px 0px rgba(126, 107, 90, 0.16);

			.checkBoxHide {
				height: 35px;
				vertical-align: middle;
				margin: 0 5px 0 15px;
			}

			.checkBoxSpan {
				color: #fff;
			}

			.cardDetail {
				height: 20px;
				line-height: 20px;
				padding: 0 15px;
			}

			/deep/ .el-checkbox {
				width: 100%;
				height: 35px;
				line-height: 35px;
				padding: 0 15px;
				box-sizing: border-box;
				color: #fff;

				.el-checkbox__label {
					color: #fff
				}

				.el-checkbox__inner {
					background-color: #fff;
					border-color: #fff;
				}

				.el-checkbox__inner::after {
					border-color: #222;
				}
			}

			.detailTitle {
				font-weight: 600;
				height: 35px;
				border-radius: 4px 4px 0 0;
			}
		}

		.filterSelectButton {
			height: 20px;
			line-height: 20px;
			cursor: pointer;
			color: #222;
			padding: 0 15px;

			>input {
				vertical-align: middle;
			}

			/deep/ .el-checkbox {
				padding: 0 26px;
				height: 35px;
				border: none;
				vertical-align: top;
				line-height: 35px;
				color: #7e6b5a;

				.el-checkbox__input.is-checked+.el-checkbox__label {
					color: #fff;
				}

				.el-checkbox__input {
					display: none;
				}

				.el-checkbox__label {
					padding-left: 0;
				}
			}
		}



	}
</style>
